<template>
    <div>
        <v-btn
                height="40px"
                outlined
                color="warning"
                :disabled="disabled"
                @click="openCopyDialog()"
        >
            {{isCopy ? "复制到" : "剪切到"}}
        </v-btn>
        <v-dialog
                v-model="copyDialog"
                width="500px"
                persistent
                overlay-opacity="0.2"
        >
            <div style="background-color: white">
                <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
                <div class="text-center text-h6 pt-2" style="border-bottom: 1px solid #f6f3f3">
                    {{isCopy ? "复制文件" : "剪切文件"}}
                </div>
                <div class="pa-5">
                    <v-treeview
                            :active.sync="selectedTree"
                            hoverable
                            activatable
                            dense
                            item-key="path"
                            :items="folderTree"
                            color="primary"
                    >
                        <template v-slot:prepend="{ item, open }">
                            <v-icon>
                                {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
                            </v-icon>
                        </template>
                    </v-treeview>
                </div>
                <v-container fluid style="border-top: 1px solid #f6f3f3">
                    <v-row>
                        <v-col>
                            <v-btn
                                :disabled="selectedTree.length === 0"
                                block
                                outlined
                                color="primary"
                                @click="doMove()"
                            >
                                {{isCopy ? "复制" : "剪切"}}
                            </v-btn>
                        </v-col>
                        <v-col>
                            <v-btn block outlined color="warning" @click="cancel()">取消</v-btn>
                        </v-col>
                    </v-row>
                </v-container>
            </div>
        </v-dialog>

        <my-exists-dialog @close="closeExistDialog()" :exists-dialog="existsDialog" :exists-list="existList"></my-exists-dialog>
    </div>
</template>

<script>
    import {getIconByType, getCapacity} from "../../../util";
    import MyLoadingOverlay from "../common/MyLoadingOverlay";
    import MyExistsDialog from "../common/MyExistsDialog";

    export default {
        name: "MyMoveBtn",
        components: {MyExistsDialog, MyLoadingOverlay},
        props: {
            isCopy: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                copyDialog: false,
                existsDialog: false,
                existList: [],
                folderTree: [],
                selectedTree: [],
                loadingOverlay: false
            }
        },
        methods: {
            getCapacity,
            getIconByType,
            openCopyDialog() {
                this.copyDialog = true;
                this.getFolderTree();
            },
            cancel() {
                this.copyDialog = false;
                this.folderTree = []
            },
            getFolderTree() {
                let _this = this;
                _this.loadingOverlay = true;
                _this._get({
                    url: 'system/disk/get-folder-tree'
                }).then((rsp) => {
                    _this.folderTree.push(rsp.data)
                }).catch(error => {
                    console.log(error);
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            },
            doMove() {
                let _this = this;
                let selectedList = _this.$store.state.selected;
                let from = _this.$route.query.path;
                let to = _this.selectedTree[0];

                // 相同目录
                if (from === to) {
                    let message = _this.isCopy ? "不能复制到相同文件夹" : "不能剪切到相同文件夹"
                    _this.$error({message: message})
                    return;
                }

                let flag = false;
                // 子目录
                for (const file of selectedList) {
                    if (file.type === 'folder') {
                        let sub;
                        if (from === "/") {
                            sub = "^" + from + file.name;
                        } else {
                            sub = "^" + from + "/" + file.name;
                        }
                        const subRegExp = new RegExp(sub);
                        // 如果为子目录则flag为true
                        if (subRegExp.test(to)) {
                            flag = true;
                            break;
                        }
                    }
                }

                if (flag) {
                    let message = _this.isCopy ? "不能复制到子目录下" : "不能剪切到子目录下"
                    _this.$error({message: message})
                    return;
                }
                _this.loadingOverlay = true;
                _this._post({
                    url: "system/disk/move",
                    data: {
                        to: to,
                        from: from,
                        copy: _this.isCopy,
                        selectedList
                    }
                }).then(rsp => {
                    _this.copyDialog = false;
                    _this.folderTree = [];
                    _this.selectedTree = [];
                    _this.$emit("move-success");
                    if (rsp.data.code === '00000') {
                        let message = _this.isCopy ? "复制成功" : "剪切成功"
                        _this.getCapacity();
                        _this.$success({message: message});
                    } else {
                        // 存在重复文件
                        _this.existList = rsp.data.object;
                        _this.existsDialog = true;
                    }
                }).catch(error => {
                    console.log(error)
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            },
            closeExistDialog() {
                this.existsDialog = false;
                this.existList = []
            }
        },
        computed: {
            disabled() {
                return this.$store.state.selected.length === 0;
            }
        }
    }
</script>

<style scoped>
</style>